<!-- 下拉筛选 -->
<template>
  <view class="drop-down-box">
    <uv-drop-down
        ref="dropDown"
        :sign="sign"
        text-active-color="#3c9cff"
        text-color="rgba(0, 0, 0, 0.6)"
        :extra-icon="{name:'arrow-down-fill',color:'#666',size:'24rpx'}"
        :extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'24rpx'}"
        :defaultValue="defaultValue"
        :custom-style="{padding: '0 30rpx', border: '0', background: '#f6f6f6', borderRadius: '10rpx 10rpx 0 0'}"
        @click="selectMenu"
    >
      <view v-for="(item, index) in dropList" :key="index">
        <uv-drop-down-item :class="datetimeFlag ? 'datetime' : ''" class="ellipsis" :name="item.name" :type="item.type" :label="item.label" :value="item.value" @click="openTab(item)"></uv-drop-down-item>
      </view>
    </uv-drop-down>
    <uv-drop-down-popup ref="dropDownPopup" :sign="sign" @popupChange="change" @clickItem="clickItem">
      <template #default>
        <view class="main">
          <view class="select-box">
            <view v-if="dropType === 'date'" class="content" @click="openDate" :style="dateContent ? '' : 'color: #b6b6b6'">
              <view class="timePeriod" :style="dateContent ? '' : 'color: #b6b6b6'">
                {{ year ? year : '年' }}
              </view>
              <view class="dividingLine">—</view>
              <view class="timePeriod" :style="dateContent ? '' : 'color: #b6b6b6'">
                {{ month ? month : '月' }}
              </view>
              <view class="dividingLine">—</view>
              <view class="timePeriod" :style="dateContent ? '' : 'color: #b6b6b6'">
                {{ day ? day : '日' }}
              </view>
            </view>
            <view v-else-if="dropType === 'datetime'" class="content">
              <view class="timePeriod" @click="openStartTime" :style="startTimeContent ? '' : 'color: #b6b6b6'">
                {{ startTimeContent ? startTimeContent : '起始时间' }}
              </view>
              <view class="dividingLine">—</view>
              <view class="timePeriod" @click="openEndTime" :style="endTimeContent ? '' : 'color: #b6b6b6'">
                {{ endTimeContent ? endTimeContent : '终止时间' }}
              </view>
            </view>
          </view>
          <view class="button-box">
            <view class="button button-style">
              <uv-button type="info" text="重置" @tap="reset"></uv-button>
            </view>
            <view class="button button-style">
              <uv-button type="primary " text="确定" @tap="submit"></uv-button>
            </view>
          </view>
        </view>
        <uv-datetime-picker ref="datePicker" v-model="dateValue" :formatter="dateFormatter" :maxDate="new Date().getTime()" mode="date" title="日期" @confirm="dateConfirm"></uv-datetime-picker>
        <uv-datetime-picker ref="startTimePicker" v-model="startTimeValue" :formatter="datetimeFormatter" :maxDate="new Date().getTime()" mode="datetime" title="起始时间" @confirm="startTimeConfirm"></uv-datetime-picker>
        <uv-datetime-picker ref="endTimePicker" v-model="endTimeValue" :formatter="datetimeFormatter" :maxDate="new Date().getTime()" mode="datetime" title="终止时间" :minDate="startTimeValue" @confirm="endTimeConfirm"></uv-datetime-picker>
      </template>
    </uv-drop-down-popup>
  </view>
</template>

<script setup>
  import dayjs from "dayjs";
  import {onLoad, onPageScroll} from '@dcloudio/uni-app';
  import {dateFormatter, datetimeFormatter} from "@/utils/dateTimeFormate";

  let emits = defineEmits(['dateChange', 'datetimeChange']);
  let props = defineProps({
    dataList: {
      type: Array,
      default: () => []
    },
    sign: {
      type: String,
      default: 'sign'
    },
    datetimeFlag: {
      type: Boolean,
      default: false
    }
  });

  let dropDown = ref(null);
  let dropDownPopup = ref();
  let defaultValue = ref([0, 'all', '0']);
  let dropList = ref([]);
  let dropType = ref('');

  let dateContent = ref('');
  let year = ref('');
  let month = ref('');
  let day = ref('');
  let startTime = ref('');
  let startTimeContent = ref('');
  let endTime = ref('');
  let endTimeContent = ref('');

  let tabName = ref();
  let sign = ref(props.sign)
  let openTab = (item) => {
      if (item.name === 'warningLocation'){
          tabName.value = 'warningLocation'
          emits('dropChange', 'warningLocation')
      }
      if (item.name === 'rectificationStatus'){
          tabName.value = 'rectificationStatus'
          emits('dropChange', 'rectificationStatus')
      }
  };

  onPageScroll(e => {
    dropDown.value.init();
  })

  /** 初始化 */
  let init = () => {
    dropList.value = JSON.parse(JSON.stringify(props.dataList));
  }

  /** 数据加载 */
  onLoad((option) => {
    init();
  });

  /** 弹窗打开状态 */
  let change = (e) => {
    // console.log('弹窗打开状态：',e);
  };

  /** 点击每个筛选项回调 */
  let selectMenu = (e) => {
    const { name, active, type } = e;
    // console.log('点击每个筛选项回调', e)
    // console.log(name, active, type)
    dropType.value = name;
    if (active) {
      dropDownPopup.value.open();
    } else {
      dropDownPopup.value.close();
    }
  };

  /** 点击菜单回调处理 */
  let clickItem = (e) => {
    // let { label, value } = e;
    // console.log('点击菜单回调处理', e)
  };

  /**
   * 日期选择器
   */
  let dateValue = ref(new Date());
  let datePicker = ref();
  let openDate = (e) => {
    datePicker.value.open();
  };
  let dateConfirm = (e) => {
    dateContent.value = dayjs(e.value).format('YYYY-MM-DD');
    year.value = dayjs(e.value).format('YYYY');
    month.value = dayjs(e.value).format('MM');
    day.value = dayjs(e.value).format('DD');
  };

  /**
   * 时间选择器-开始时间
   */
  let startTimeValue = ref(new Date());
  let startTimePicker = ref();
  let openStartTime = (e) => {
    startTimePicker.value.open();
  };
  let startTimeConfirm = (e) => {
    startTime.value = e.value;
    startTimeContent.value = dayjs(e.value).format('YYYY-MM-DD HH:mm');
    if (endTimeContent.value && startTime.value <= endTime.value) {
      endTime.value = '';
      endTimeContent.value = '';
    }
  };

  /**
   * 时间选择器-结束时间
   */
  let endTimeValue = ref(new Date());
  let endTimePicker = ref();
  let openEndTime = (e) => {
    endTimePicker.value.open();
  };
  let endTimeConfirm = (e) => {
    endTime.value = e.value;
    endTimeContent.value = dayjs(e.value).format('YYYY-MM-DD HH:mm');
  };

  /** 重置按钮 */
  let reset = () => {
    let list = JSON.parse(JSON.stringify(props.dataList));
    dropList.value.filter(item => {
      if (item.name === dropType.value) {
        list.forEach((item2, index) => {
          if (item2.name === dropType.value) {
            item.label = list[index].label;
          }
        })
      }
    })
    if (dropType.value === 'date') {
      dateContent.value = '';
      year.value = '';
      month.value = '';
      day.value = '';
      emits('dateChange', dateContent.value)
    }
    if (dropType.value === 'datetime') {
      startTimeContent.value = '';
      endTimeContent.value = '';
      let times = {
        startTime: startTimeContent.value,
        endTime: endTimeContent.value
      }
      emits('datetimeChange', times)
    }
    dropDownPopup.value.close();
  };

  /** 确认按钮 */
  let submit = () => {
    if (dropType.value === 'date') {
      if (dateContent.value) {
        dropList.value.filter(item => {
          if (item.name === dropType.value) {
            item.label = dateContent.value;
          }
        })
        emits('dateChange', dateContent.value)
        dropDownPopup.value.close();
      } else {
        uni.showToast({title: '请选择日期', icon: 'none'});
      }
    }
    if (dropType.value === 'datetime') {
      if (startTimeContent.value && endTimeContent.value) {
        let time = startTimeContent.value + '~' + endTimeContent.value;
        let times = {
          startTime: startTimeContent.value,
          endTime: endTimeContent.value
        }
        dropList.value.filter(item => {
          if (item.name === dropType.value) {
            item.label = time;
          }
        })
        emits('datetimeChange', times)
        dropDownPopup.value.close();
      } else {
        uni.showToast({title: '请选择时间范围', icon: 'none'});
      }
    }
  }

  let close = () => {
    dropDownPopup.value.close();
  };

  let setTabLabel = (e) => {
    dropList.value.filter(item => {
      if (item.name === tabName.value) {
          item.label = e;
      }
    })
  };

  defineExpose({
    setTabLabel,
    close,
    reset
  })
</script>

<style scoped lang="scss">
  .drop-down-box {
    background: #3775f6;
  }
  .drop-down {
    background: #f6f6f6;
  }

  .main {
    .select-box {
      padding: 20rpx;
      .content {
        height: 100rpx;
        padding: 0 20rpx;
        line-height: 100rpx;
        background: #f6f6f6;
        border-radius: 10rpx;
        display: flex;
        justify-content: space-between;
        .timePeriod {
          width: 50%;
          text-align: center;
        }
        .dividingLine {
          color: #b6b6b6;
        }
      }
    }
    .button-box {
      height: 60rpx;
      display: flex;
      justify-content: space-between;
    .button {
        width: 50%;
        padding: 20rpx;
      }
    }
  }

  .ellipsis {
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
  }
</style>